<!--
 * @Description: zzb
 * @Version: 0.0.1
 * @Autor: zzb
 * @Date: 2022-06-28 15:23:55
 * @LastEditors: zzb
 * @LastEditTime: 2023-11-09 16:15:39
-->
<template>
  <div class="read-container">
    <Resize v-if="['yc', 'dt', 'sz','dev'].includes(city_name)">
      <template v-slot:left>
        <div class="read_l">
          <vxe-table
            highlight-current-row
            highlight-hover-row
            row-key
            :show-header="false"
            show-overflow
            ref="xTree"
            border="inner"
            :data="siteList"
            :tree-config="{
              children: 'children',
              parentKey: 'siteId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
              reserve: true,
              accordion: true,
            }"
            class="left-table"
          >
            <vxe-column tree-node field="name" show-overflow>
              <template #default="{ row }">
                <span>
                  <img
                    src="../../../assets/icons/png/globe.gif"
                    alt=""
                    style="verticalalign: text-bottom"
                  />
                  <span
                    @click="haldleClickSite(row)"
                    style="cursor: pointer; fontsize: 12px; color: #000"
                  >
                    {{ row.siteName || row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </template>
      <template v-slot:right>
        <div class="read_r">
          <div class="app-container" v-if="siteRow">
            <div class="content-wrap my-search" v-if="false">
              <el-form
                :model="queryParams"
                size="mini"
                ref="queryForm"
                :inline="true"
                v-show="showSearch"
                label-width="68px"
              >
                <el-form-item label="值班标题" prop="dutyTitle">
                  <el-input
                    v-model="queryParams.dutyTitle"
                    placeholder="请输入值班标题"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
                <el-form-item label="操作人员" prop="createBy">
                  <el-input
                    v-model="queryParams.createBy"
                    placeholder="请输入操作人员"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >搜索</el-button
                  >
                  <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <el-row :gutter="10" class="mb8 grid-content">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleAdd"
                  v-hasPermi="['system:duty:add']"
                  >新增</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="success"
                  plain
                  icon="el-icon-edit"
                  size="mini"
                  :disabled="single"
                  @click="handleUpdate"
                  v-hasPermi="['system:duty:edit']"
                  >修改</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  size="mini"
                  :disabled="multiple"
                  @click="handleDelete"
                  v-hasPermi="['system:duty:remove']"
                  >删除</el-button
                >
              </el-col>
              <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
              ></right-toolbar>
            </el-row>

            <el-table
              v-loading="loading"
              :data="dutyList"
              @selection-change="handleSelectionChange"
              v-if="['yc'].includes(city_name)"
            >
              <el-table-column type="selection" width="55" align="center" />

              <el-table-column label="值班顺序" align="center" prop="px">
              </el-table-column>
              <el-table-column label="值班人" align="center" prop="dutypeople1">
              </el-table-column>
              <el-table-column label="手机" align="center" prop="tel">
              </el-table-column>
              <el-table-column label="电话" align="center" prop="phone">
              </el-table-column>

              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    v-hasPermi="['system:duty:edit']"
                    >修改</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    v-hasPermi="['system:duty:remove']"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-table
              v-loading="loading"
              :data="dutyList"
              border
              @selection-change="handleSelectionChange"
              v-else-if="['dt'].includes(city_name)"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column
                label="值班时间"
                align="center"
                prop="times"
                width="100"
              >
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.times, "{y}-{m}-{d}") }}</span>
                </template>
              </el-table-column>

              <el-table-column label="带班领导" align="center" prop="leader1">
              </el-table-column>

              <el-table-column
                label="值班"
                align="center"
                prop="weekdaypeople1"
                width="100"
              >
              </el-table-column>

              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    v-hasPermi="['system:duty:edit']"
                    >修改</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    v-hasPermi="['system:duty:remove']"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-table
              v-loading="loading"
              :data="dutyList"
              @selection-change="handleSelectionChange"
              style="displayHead"
              v-else-if="['sz'].includes(city_name)"
              :header-cell-style="handerMethod"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column
                label="值班时间"
                align="center"
                prop="times"
                width="100"
              >
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.times, "{y}-{m}-{d}") }}</span>
                </template>
              </el-table-column>

              <el-table-column label="带班领导" align="center">
                <el-table-column label="" align="center" prop="leader1" />
                <el-table-column align="center" prop="leader2" />
              </el-table-column>
              <el-table-column label="带班" align="center">
                <el-table-column align="center" prop="dutypeople1" />
                <el-table-column align="center" prop="dutypeople2" />
              </el-table-column>
              <el-table-column label="值班" align="center" width="100">
                <el-table-column align="center" prop="weekdaypeople1" />
                <el-table-column align="center" prop="weekdaypeople2" />
              </el-table-column>

              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    v-hasPermi="['system:duty:edit']"
                    >修改</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    v-hasPermi="['system:duty:remove']"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />

            <!-- 添加或修改值班对话框 -->
            <el-dialog
              v-dialogDrag
              :title="title"
              :visible.sync="open"
              width="780px"
              append-to-body
            >
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="90px"
              >
                <el-row v-if="['dt', 'sz'].includes(city_name)">
                  <el-col :span="24">
                    <el-form-item prop="times" label="时间">
                      <el-date-picker
                        type="date"
                        placeholder="选择时间"
                        v-model="form.times"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row v-if="['yc'].includes(city_name)">
                  <el-col :span="12">
                    <el-form-item label="值班顺序" prop="px">
                      <el-input
                        v-model="form.px"
                        placeholder="请输入值班顺序"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="值班人" prop="dutypeople1">
                      <el-input
                        v-model="form.dutypeople1"
                        placeholder="请输入值班人"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="电话" prop="tel">
                      <el-input v-model="form.tel" placeholder="请输入电话" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="手机" prop="phone">
                      <el-input v-model="form.phone" placeholder="请输入手机" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row v-if="['dt'].includes(city_name)">
                  <el-col :span="24">
                    <el-form-item label="带班领导" prop="leader1">
                      <el-input
                        v-model="form.leader1"
                        placeholder="请输入带班领导"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="值班" prop="weekdaypeople1">
                      <el-input v-model="form.weekdaypeople1" placeholder="" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row v-if="['sz'].includes(city_name)">
                  <el-col :span="12">
                    <el-form-item label="带班领导" prop="leader1">
                      <el-input
                        v-model="form.leader1"
                        placeholder="请输入带班领导"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="带班领导" prop="leader2">
                      <el-input
                        v-model="form.leader2"
                        placeholder="请输入带班领导"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="备班人员" prop="dutypeople1">
                      <el-input v-model="form.dutypeople1" placeholder="" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="备班人员" prop="dutypeople2">
                      <el-input v-model="form.dutypeople2" placeholder="" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="值班" prop="weekdaypeople1">
                      <el-input v-model="form.weekdaypeople1" placeholder="" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="值班">
                      <el-input v-model="form.weekdaypeople2" placeholder="" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
              </div>
            </el-dialog>

            <!-- yc ycOpen 添加或修改值班对话框 -->
            <el-dialog
              v-dialogDrag
              :title="title"
              :visible.sync="open"
              width="780px"
              append-to-body
            >
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="90px"
              >
                <el-form-item label="值班顺序" prop="px">
                  <el-input v-model="form.px" placeholder="请输入值班顺序" />
                </el-form-item>

                <el-form-item label="值班人" prop="dutypeople1">
                  <el-input
                    v-model="form.dutypeople1"
                    placeholder="请输入值班人"
                  />
                </el-form-item>

                <el-form-item label="电话" prop="tel">
                  <el-input v-model="form.tel" placeholder="请输入电话" />
                </el-form-item>

                <el-form-item label="手机" prop="phone">
                  <el-input v-model="form.phone" placeholder="请输入手机" />
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
              </div>
            </el-dialog>

            <!-- sz szOpen 添加或修改值班对话框 -->
            <el-dialog
              v-dialogDrag
              :title="title"
              :visible.sync="szOpen"
              width="780px"
              append-to-body
            >
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="90px"
              >
                <el-row>
                  <el-col :span="24">
                    <el-form-item prop="times" label="时间">
                      <el-date-picker
                        type="date"
                        placeholder="选择时间"
                        v-model="form.times"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="带班领导" prop="leader1">
                      <el-input
                        v-model="form.leader1"
                        placeholder="请输入带班领导"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="带班领导" prop="leader2">
                      <el-input
                        v-model="form.leader2"
                        placeholder="请输入带班领导"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="备班人员" prop="dutypeople1">
                      <el-input v-model="form.dutypeople1" placeholder="" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="备班人员" prop="dutypeople2">
                      <el-input v-model="form.dutypeople2" placeholder="" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="值班" prop="weekdaypeople1">
                      <el-input v-model="form.weekdaypeople1" placeholder="" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="值班">
                      <el-input v-model="form.weekdaypeople2" placeholder="" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
              </div>
            </el-dialog>

            <!-- dt  dtOpen 添加或修改值班对话框 -->
            <el-dialog
              v-dialogDrag
              :title="title"
              :visible.sync="dtOpen"
              width="780px"
              append-to-body
            >
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="90px"
              >
                <el-form-item prop="times" label="时间">
                  <el-date-picker
                    type="date"
                    placeholder="选择时间"
                    v-model="form.times"
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="带班领导" prop="leader1">
                  <el-input
                    v-model="form.leader1"
                    placeholder="请输入带班领导"
                  />
                </el-form-item>
                <el-form-item label="值班" prop="weekdaypeople1">
                  <el-input v-model="form.weekdaypeople1" placeholder="" />
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </template>
    </Resize>

    <span class="no_pro_menu" v-else>暂无该功能，仅对运城、大同、朔州开放</span>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { listSite } from "@/api/content/net";
import {
  listDuty,
  getDuty,
  delDuty,
  addDuty,
  updateDuty,
} from "@/api/extendApplication/duty";
export default {
  name: "Name",
  data() {
    return {
      //站点列表
      siteList: [],
      siteRow: undefined,

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 选中的日期
      times: "",
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 值班表格数据
      dutyList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      dtOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        times: [
          { required: false, message: "值班时间不能为空", trigger: "blur" },
        ],
        px: [{ required: false, message: "值班顺序不能为空", trigger: "blur" }],
        dutypeople1: [
          { required: false, message: "内容不能为空", trigger: "blur" },
        ],
        tel: [{ required: false, message: "电话不能为空", trigger: "blur" }],
        phone: [{ required: false, message: "手机不能为空", trigger: "blur" }],
        leader1: [
          { required: false, message: "带班领导不能为空", trigger: "blur" },
        ],
        weekdaypeople1: [
          { required: false, message: "内容不能为空", trigger: "blur" },
        ],
      },
    };
  },

  components: {},

  computed: {
    ...mapState({
      city_name: (state) => state.user.city_name,
    }),
  },
  created() {
    if (["yc", "dt", "sz"].includes(this.city_name)) {
      this.getSiteList();
    }
  },
  mounted() {},

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },

  methods: {
    //获取站点列表
    getSiteList() {
      this.siteRow = undefined;
      listSite()
        .then((res) => {
          this.siteList = [
            { name: "WYCMS主站", root: "000", children: res.data },
          ];
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.siteList[0], true);
          });
        });
    },
    //点击站点
    haldleClickSite(row) {
      if (row.root == "000") return;
      if (row.siteId == this.siteRow?.siteId) return;
      this.siteRow = row;
      this.queryParams.siteId = row.siteId;
      this.queryParams.siteid = row.siteId;
      this.getList();
      console.log(
        "🚀 ~ file: index.vue:100 ~ haldleClickSite ~ this.siteRow",
        this.siteRow
      );

      this.$store.dispatch("column/setSiteRow", row);
      this.$store.dispatch("statistics/setChannelIds", []);
    },

    /** 查询值班列表 */
    getList() {
      this.loading = true;
      listDuty(this.queryParams).then((response) => {
        this.dutyList = response.data.list.map((item) => {
          item.leader1 = item.leader1 == "null" ? "" : item.leader1;
          item.leader2 = item.leader2 == "null" ? "" : item.leader2;
          item.dutypeople1 = item.dutypeople1 == "null" ? "" : item.dutypeople1;
          item.dutypeople2 = item.dutypeople2 == "null" ? "" : item.dutypeople2;
          item.weekdaypeople1 =
            item.weekdaypeople1 == "null" ? "" : item.weekdaypeople1;
          item.weekdaypeople2 =
            item.weekdaypeople2 == "null" ? "" : item.weekdaypeople2;
          return item;
        });
        this.total = response.data.totalCount;
        this.loading = false;
      });
    },

    // 取消按钮
    cancel() {
      this[this.city_name + "Open"] = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        status: undefined,
        times: this.parseTime(new Date(), "{y}-{m}-{d}"),
        leader1: undefined,
        leader2: undefined,
        dutypeople2: undefined,
        dutypeople1: undefined,
        weekdaypeople1: undefined,
        weekdaypeople2: undefined,
        siteId: this.siteRow?.siteId,
        siteid: this.siteRow?.siteId,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.times = selection.map((item) => item.times);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this[this.city_name + "Open"] = true;
      this.title = "添加值班信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getDuty({ id }).then((response) => {
        this.form = response.data;
        this[this.city_name + "Open"] = true;
        this.title = "修改值班信息";
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            addDuty(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this[this.city_name + "Open"] = false;
              this.getList();
            });
          } else {
            addDuty(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this[this.city_name + "Open"] = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const dutyIds = row.id || this.ids.join(",");
      console.log("🚀 ~ file: index.vue:425 ~ handleDelete ~ dutyIds", dutyIds);
      const times = row.times || this.times;
      this.$confirm(`是否确认删除值班时间为 ${times}  的数据项?`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delDuty({ id: dutyIds });
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

    //隐藏表头
    handerMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 1) {
        //这里为了是将第二行的表头隐藏，就形成了合并表头的效果
        return { display: "none" };
      }
    },
  },
};
</script>

<style scoped lang="scss">
.read-container {
  width: 100%;
  // height: calc(100vh - 100px);
  // height: calc(100vh - #{$footHeight} - 0px - 50px - 20px);
  display: flex;
  flex-direction: row;
  position: relative;
  border: 1px solid #ccc;

  .read_l {
    overflow: auto;
    // min-width: 240px;
    width: 100%;
    height: 100%;
    background: #f4f4f4 !important;
    display: flex;
    flex-direction: column;

    .left-table {
      flex: 1;
      height: 0;
      overflow: overlay;
      overflow: auto;
      min-width: 240px;
    }
  }

  .read_r {
    overflow: overlay;
    overflow: auto;
    width: 100%;
    padding: 10px;
    border-left: 1px solid #ccc;
    height: 100%;
    flex: 1;

    .app-container {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}

::v-deep .el-tabs__content {
  height: calc(100% - 70px);

  .el-tab-pane {
    height: 100%;
  }
}

.num-container {
  border: none;
}

::v-deep .displayHead {
  .el-table__header {
    thead {
      tr:last-child {
        display: none;
      }
    }
  }
}
</style>
